import React, { useState, useEffect } from 'react';
import { Modal, Button, Input, Form, Upload, Table, Divider, Tabs, Col } from 'antd';
import { UploadOutlined } from '@ant-design/icons';



export default (props) => {
    const [fileList, setFileList] = useState(null);

    const handleChange = (info) => {
        let fileList = [...info.fileList];

        // 1. Limit the number of uploaded files
        // Only to show two recent uploaded files, and old ones will be replaced by the new
        fileList = fileList.slice(-2);

        // 2. Read from response and show file link
        fileList = fileList.map(file => {
            if (file.response) {
                // Component will show file.url as link
                file.url = file.response.url;
            }
            return file;
        });

        setFileList(fileList)
    }
    const uploadProps = {
        action: 'http://localhost:3000/form/upload',
        method: "post",
        name: "example.png",
        data: { name: "yxfan" },
        onChange: handleChange,
        multiple: true,
    };

    return (
        <Modal
            title="Basic Modal"
            width={650}
            visible={props.visible}
            onOk={props.onOk}
            onCancel={props.onCancel}
        >
            <Form
                layout="inline"
            >

                <Form.Item
                    label="Fail"
                >
                    <Input placeholder="unavailable choice" id="error" />
                </Form.Item>

                <Form.Item
                    label="Fail"
                >
                    <Input placeholder="unavailable choice" id="error" />
                </Form.Item>

                <Form.Item
                    label="Fail"
                >
                    <Input placeholder="unavailable choice" id="error" />
                </Form.Item>

                <Form.Item
                    label="Fail"
                >
                    <Input placeholder="unavailable choice" id="error" />
                </Form.Item>

                <Form.Item
                    label="文件上传"
                    name="upload"
                >
                    <Upload {...uploadProps} fileList={fileList}>
                        <Button icon={<UploadOutlined />}>选择文件</Button>
                    </Upload>
                </Form.Item>
            </Form>
        </Modal>
    )

}